Element Visibility Toggle


Exercise 1

Create a webpage with three buttons and two text boxes (initially hidden).
The first button should toggle the visibility of both text boxes (show/hide).
The second and third buttons should toggle the visibility of each text box individually.

   
  const box1=document.getElementById('box1')
  const box2=document.getElementById('box2')
  
  
  function showbox1(){
    if  (box2.classList.contains("active")){
        box2.classList.remove('active')
  }
  box1.classList.add('active');
  }
  function showbox2(){
      if  (box1.classList.contains("active")){
          box1.classList.remove('active')
      }
      box2.classList.add('active');
  }
  function showall() {
      box1.classList.add("active");
      box2.classList.add("active");
    }